Nota: Este documento es parte de una traducci�n al castellano de la Recomendaci�n del W3C "HTML 4.01 Specification" (m�s informaci�n). Puede consultar la versi�n original del mismo. Para cualquier comentario o correcci�n acerca de la traducci�n p�ngase en contacto con el traductor en jrpozo arroba conclase punto net. Gracias por su colaboraci�n.
V�ase el Aviso de copyright de la traducci�n.
Contenidos
Las caracter�sticas multimedia de HTML permiten a los autores incluir en sus p�ginas im�genes, aplicaciones (programas que se descargan autom�ticamente y se ejecutan en la m�quina del usuario), videoclips, y otros documentos HTML en sus p�ginas.
Por ejemplo, para incluir una imagen PNG en un documento, los autores pueden escribir:
<BODY> <P>Aqu� tienen un primer plano del Gran Ca��n: <OBJECT data="canyon.png" type="image/png"> Esto es un <EM>primer plano</EM> del Gran Ca��n. </OBJECT> </BODY>
Las versiones anteriores de HTML permit�an a los autores incluir im�genes (por medio de IMG) y aplicaciones (por medio de APPLET). Estos elementos tienen varias limitaciones:
Para solucionar estos problemas, HTML 4 introduce el elemento OBJECT, que ofrece una soluci�n universal para la inclusi�n de objetos gen�ricos. El elemento OBJECT permite a los autores HTML especificar todo lo que necesita un agente de usuario para la representaci�n de un objeto: c�digo fuente, valores iniciales, y datos en tiempo de ejecuci�n. En esta especificaci�n, el t�rmino "objeto" se utiliza para describir las cosas que la gente quiere colocar en los documentos HTML; otros t�rminos usados habitualmente son: applets, plug-ins, controladores de medios, etc.
El nuevo elemento OBJECT asume as� algunas de las tareas realizadas por los elementos existentes. Consid�rese la siguiente tabla de funcionalidades:
| Tipo de inclusi�n | Elemento espec�fico | Elemento gen�rico |
|---|---|---|
| Imagen | IMG | OBJECT |
| Aplicaci�n | APPLET (Desaprobado) | OBJECT |
| Otro documento HTML | IFRAME | OBJECT |
La tabla indica que cada tipo de inclusi�n tiene una soluci�n espec�fica y una general. El elemento gen�rico OBJECT servir� como soluci�n de implementaci�n de los tipos de medios futuros.
Para incluir im�genes, los autores pueden usar el elemento OBJECT o el elemento IMG.
Para incluir aplicaciones, los autores deber�an usar el elemento OBJECT ya que el elemento APPLET est� desaprobado.
Para incluir un documento HTML en otros, los autores pueden usar o bien el nuevo elemento IFRAME o bien el elemento OBJECT. En ambos casos, el documento incluido sigue siendo independiente del documento principal. Los agentes de usuario visuales pueden presentar el documento incluido en una ventana diferenciada del documento principal. Consulte las notas sobre documentos incluidos para una comparaci�n entre OBJECT e IFRAME en lo que a inclusi�n de documentos se refiere.
Las im�genes y otros objetos incluidos pueden tener hiperv�nculos asociados a ellos, tanto a trav�s de los mecanismos de vinculaci�n est�ndar, como tambi�n a trav�s de mapas de im�genes. Un mapa de im�genes especifica las regiones geom�tricas activas de un objeto incluido, y asigna un v�nculo a cada regi�n. Cuando se activan, estos v�nculos pueden hacer que se abra un documento, que se ejecute un programa en el servidor, etc.
En las secciones siguientes, hablamos sobre los distintos mecanismos que est�n a disposici�n de los autores para inclusiones multimedia y para crear mapas de im�genes de dichas inclusiones.
<!-- Para evitar problemas con AAUU de s�lo texto as� como para hacer el contenido de las im�genes inteligibles y navegables para los usuarios de AAUU no visuales, es necesario proporcionar una descripci�n con ALT, y evitar mapas de im�genes en el lado del servidor --> <!ELEMENT IMG - O EMPTY -- Imagen incluida --> <!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URI; #REQUIRED -- URI de la imagen a incluir -- alt %Text; #REQUIRED -- descripci�n corta -- longdesc %URI; #IMPLIED -- v�nculo a descripci�n larga (complementa a alt) -- name CDATA #IMPLIED -- nombre de la imagen para los scripts -- height %Length; #IMPLIED -- especificar nueva altura -- width %Length; #IMPLIED -- especificar nueva anchura -- usemap %URI; #IMPLIED -- usar mapa de im�genes en el cliente -- ismap (ismap) #IMPLIED -- usar mapa de im�genes en el servidor -- >
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
Atributos definidos en otros lugares
El elemento IMG incluye una imagen en el documento actual en la posici�n de la definici�n del elemento. El elemento IMG no tiene contenido; normalmente se reemplaza en l�nea por la imagen designada por el atributo src, con la �nica excepci�n de las im�genes alineadas a la izquierda o a la derecha y que est�n "flotando" fuera de l�nea.
En un ejemplo anterior, definimos un v�nculo a una fotograf�a de familia. Aqu�, insertamos la foto directamente en el documento actual:
<BODY>
<P>�Acabo de volver de mis vacaciones! Aqu� os pongo
una foto de mi familia en el lago:
<IMG src="http://www.algunsitio.com/Gente/Juan/vacaciones/familia.png"
alt="Una foto de mi familia en el lago.">
</BODY>
Esta inclusi�n tambi�n puede realizarse con el elemento OBJECT como sigue:
<BODY>
<P>�Acabo de volver de mis vacaciones! Aqu� os pongo una foto
de mi familia en el lago:
<OBJECT data="http://www.algunsitio.com/Gente/Juan/vacaciones/familia.png"
type="image/png">
Una foto de mi familia en el lago.
</OBJECT>
</BODY>
El atributo alt especifica un texto alternativo que se representa cuando la imagen no puede ser mostrada (ver abajo para m�s informaci�n sobre c�mo especificar texto alternativo). Los agentes de usuario deben representar el texto alternativo cuando no puedan soportar im�genes, cuando no puedan soportar un tipo de im�genes, o cuando est�n configurados para no mostrar im�genes.
El siguiente ejemplo muestra c�mo puede utilizarse el atributo longdesc para una descripci�n m�s rica:
<BODY>
<P>
<IMG src="mapadelsitio.gif"
alt="Mapa del Sitio de Laboratorios HP"
longdesc="mapadelsitio.html">
</BODY>
El atributo alt proporciona una descripci�n corta de la imagen. Esta informaci�n deber�a ser suficiente como para que los usuarios puedan decidir si quieren seguir el v�nculo dado por el atributo longdesc hacia la descripci�n m�s larga, en este caso "mapadelsitio.html".
Consulte la secci�n sobre la presentaci�n visual de objetos, im�genes y aplicaciones para informaci�n sobre tama�o de la imagen, alineaci�n y bordes.
<!ELEMENT OBJECT - - (PARAM | %flow;)* -- objeto gen�rico incluido --> <!ATTLIST OBJECT %attrs; -- %coreattrs, %i18n, %events -- declare (declare) #IMPLIED -- declarar pero no crear -- classid %URI; #IMPLIED -- identifica una implementaci�n -- codebase %URI; #IMPLIED -- URI base para classid, data, archive-- data %URI; #IMPLIED -- referencia a los datos del objeto -- type %ContentType; #IMPLIED -- tipo de contenido de los datos -- codetype %ContentType; #IMPLIED -- tipo de contenido del c�digo -- archive CDATA #IMPLIED -- lista de URIs separados por espacios -- standby %Text; #IMPLIED -- mensaje a mostrar mientras se carga -- height %Length; #IMPLIED -- especificar nueva altura -- width %Length; #IMPLIED -- especificar nueva anchura -- usemap %URI; #IMPLIED -- usar mapa de im�genes en el cliente -- name CDATA #IMPLIED -- enviar como parte de un formulario -- tabindex NUMBER #IMPLIED -- posici�n en el orden de tabulaci�n -- >
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
Definiciones de atributos
Atributos definidos en otros lugares
La mayor�a de los agentes de usuario tienen mecanismos integrados para representar tipos de datos comunes como texto, im�genes GIF, colores, fuentes, y un pu�ado de elementos gr�ficos. Para representar tipos de datos para los cuales no tienen soporte nativo, los agentes de usuario suelen ejecutar aplicaciones externas. El elemento OBJECT permite a los autores controlar si los datos deber�an ser representados externamente por alg�n programa, especificado por el autor, que represente los datos dentro del agente de usuario.
En el caso m�s general, puede ser necesario que el autor tenga que especificar tres tipos de informaci�n:
El elemento OBJECT permite a los autores especificar estos tres tipos de datos, pero los autores no tienen que especificar necesariamente los tres a la vez. Por ejemplo, algunos objetos pueden no necesitar datos (p.ej., una aplicaci�n aut�noma que realice una peque�a animaci�n). Otros pueden no necesitar una inicializaci�n en tiempo de ejecuci�n. Y otros pueden no necesitar informaci�n adicional sobre la implementaci�n, es decir, el propio agente de usuario puede ya saber c�mo representar ese tipo de datos (p.ej., im�genes GIF).
Los autores especifican la implementaci�n de un objeto y la localizaci�n de los datos a representar por medio del objeto OBJECT. Sin embargo, para especificar valores en tiempo de ejecuci�n, los autores usan el elemento PARAM, del cual se habla en la secci�n sobre inicializaci�n de objetos.
El elemento OBJECT tambi�n puede aparecer en el contenido del elemento HEAD. Ya que los agentes de usuario en general no representan los elementos del HEAD, los autores deber�an asegurarse de que los elementos OBJECT en el HEAD no especifiquen contenido que pueda ser representado. Consulte la secci�n sobre compartir datos de un marco para un ejemplo de inclusi�n del elemento OBJECT en el elemento HEAD.
Consulte la secci�n sobre controles de formulario para informaci�n sobre elementos OBJECT en formularios.
Este documento no especifica el comportamiento de elementos OBJECT que usen tanto el atributo classid para identificar una implementaci�n como el atributo data para especificar los datos para esa implementaci�n. Para asegurar la portabilidad, los autores deber�an usar el elemento PARAM para decir a las implementaciones d�nde obtener los datos adicionales.
Un agente de usuario debe interpretar un elemento OBJECT de acuerdo con las siguientes reglas de precedencia:
Los autores no deber�an incluir contenido en los elementos OBJECT que aparezcan en el elemento HEAD.
En el siguiente ejemplo, insertamos una aplicaci�n de reloj anal�gico en un documento por medio del elemento OBJECT. La aplicaci�n, escrita en el lenguaje Python, no necesita datos adicionales ni valores en tiempo de ejecuci�n. El atributo classid especifica la localizaci�n de la aplicaci�n:
<P><OBJECT classid="http://www.miamachina.it/relojanalogico.py"> </OBJECT>
Obs�rvese que el reloj ser� representado tan pronto como el agente de usuario represente esta declaraci�n OBJECT. Es posible retrasar la representaci�n del objeto declarando el objeto en primer lugar (seg�n se describe m�s abajo).
Los autores deber�an completar esta declaraci�n con un texto alternativo como contenido de OBJECT por si el agente de usuario no puede representar el reloj.
<P><OBJECT classid="http://www.miamachina.it/relojanalogico.py"> Un reloj animado. </OBJECT>
Una consecuencia significativa del dise�o del elemento OBJECT es que ofrece un mecanismo para especificar representaciones alternativas del objeto; cada declaraci�n OBJECT anidada puede especificar tipos de contenido alternativos. Si un agente de usuario no puede representar el primer OBJECT, intenta representar los contenidos, que a su vez pueden ser otro elemento OBJECT, etc.
En el siguiente ejemplo, anidamos varias declaraciones OBJECT para ilustrar el funcionamiento de las representaciones alternativas. Un agente de usuario intentar� representar el primer elemento OBJECT que pueda, en el orden siguiente: (1) una aplicaci�n LaTierra escrita en el lenguaje Python, (2) una animaci�n MPEG de la Tierra, (3) una imagen GIF de la Tierra, (4) texto alternativo.
<P> <!-- Primero, intentarlo con la aplicaci�n Python -->
<OBJECT title="La Tierra vista desde el espacio"
classid="http://www.observer.mars/LaTierra.py">
<!-- Si no, intentarlo con el v�deo MPEG -->
<OBJECT data="LaTierra.mpeg" type="application/mpeg">
<!-- Si no, intentarlo con la imagen GIF -->
<OBJECT data="LaTierra.gif" type="image/gif">
<!-- Si no, representar el texto -->
<STRONG>La Tierra</STRONG> vista desde el espacio.
</OBJECT>
</OBJECT>
</OBJECT>
La declaraci�n m�s externa especifica una aplicaci�n que no necesita datos ni valores iniciales. La segunda declaraci�n especifica una animaci�n MPEG, y como no define la localizaci�n de ninguna implementaci�n que procese MPEG, depende de que el agente de usuario represente la animaci�n. Tambi�n establecemos el atributo type para que los agentes de usuario que sepan que no pueden procesar MPEG no se molesten en obtener "LaTierra.mpeg" de la red. La tercera declaraci�n especifica la localizaci�n de un fichero GIF y proporciona un texto alternativo por si todos los mecanismos anteriores fallaran.
Datos en l�nea frente a datos externos. Los datos a representar pueden proporcionarse de dos maneras: en l�nea y desde un recurso externo. Si bien el primer m�todo resultar� generalmente en una representaci�n m�s r�pida, no es conveniente cuando se representan grandes cantidades de datos.
Aqu� tenemos un ejemplo que ilustra c�mo se puede servir a un elemento OBJECT datos en l�nea:
<P>
<OBJECT id="reloj1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...datos en base64...">
Un reloj.
</OBJECT>
Consulte la secci�n sobre la representaci�n visual de objetos, im�genes y aplicaciones para informaci�n sobre tama�o de objetos, alineaci�n y bordes.
<!ELEMENT PARAM - O EMPTY -- valor de propiedad con nombre --> <!ATTLIST PARAM id ID #IMPLIED -- identificador �nico a nivel de documento -- name CDATA #REQUIRED -- nombre de la propiedad -- value CDATA #IMPLIED -- valor de la propiedad -- valuetype (DATA|REF|OBJECT) DATA -- c�mo interpretar el valor -- type %ContentType; #IMPLIED -- tipo de contenido para el valor cuando valuetype=ref -- >
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos
Atributos definidos en otros lugares
Los elementos PARAM especifican un conjunto de valores que pueden ser necesarios para un objeto en tiempo de ejecuci�n. Puede aparecer cualquier n�mero de elementos PARAM en el contenido de un elemento OBJECT o APPLET, y en cualquier orden, pero deben ser colocados al principio del contenido del elemento OBJECT o APPLET que los contienen.
Se supone que la sintaxis de nombres y valores es entendida por la implementaci�n del objeto. Este documento no especifica c�mo deber�an obtener los agentes de usuario los pares nombre/valor ni c�mo deber�an interpretar los nombres de par�metros que aparezcan dos veces.
Volvemos al ejemplo del reloj para ilustrar la utilizaci�n de PARAM: supongamos que la aplicaci�n es capaz de manejar dos par�metros de ejecuci�n que definen su altura y anchura iniciales. Podemos establecer las dimensiones iniciales en 40x40 p�xeles con dos elementos PARAM.
<P><OBJECT classid="http://www.miamachina.it/relojanalogico.py"> <PARAM name="altura" value="40" valuetype="data"> <PARAM name="anchura" value="40" valuetype="data"> Este agente de usuario no puede representar aplicaciones Python. </OBJECT>
En el siguiente ejemplo, se especifican los datos de ejecuci�n para el par�metro "Valores_inic" del objeto como recurso externo (un fichero GIF). El valor del atributo valuetype se establece por tanto a "ref" y value es un URI que designa el recurso.
<P><OBJECT classid="http://www.gifstuff.com/aplicgif"
standby="Cargando Elvis...">
<PARAM name="Valores_inic"
value="./imagenes/elvis.gif">
valuetype="ref">
</OBJECT>
Obs�rvese que tambi�n hemos establecido el atributo standby de modo que el agente de usuario pueda mostrar un mensaje mientras se carga el mecanismo de representaci�n.
Cuando representen un elemento OBJECT, los agentes de usuario s�lo deben buscar el contenido de aquellos elementos PARAM que sean hijos directos y d�rselos al OBJECT.
As�, en el ejemplo siguiente, si se representa "obj1", "param1" se aplica a "obj1" (y no a "obj2"). Si "obj1" no se representa y "obj2" s�, "param1" no se tiene en cuenta, y "param2" se aplica a "obj2". Si ninguno de los OBJECT se representa, ninguno de los PARAM se aplica.
<P>
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
La localizaci�n de la implementaci�n de un objeto viene dada por un URI. Como vimos en la introducci�n a los URIs, el primer segmento de un URI absoluto especifica el esquema de nombres usado para transferir los datos designados por el URI. Para documentos HTML, este esquema es normalmente "http". Algunas aplicaciones podr�an usar otros esquemas de nombres. Por ejemplo, cuando se especifica una aplicaci�n Java, los autores pueden usar URIs que comiencen con java, y para aplicaciones ActiveX, los autores pueden usar "clsid".
En el ejemplo siguiente, insertamos una aplicaci�n Java en un documento HTML.
<P><OBJECT classid="java:program.start"> </OBJECT>
Al establecer el atributo codetype, un agente de usuario puede decidir si obtener la aplicaci�n Java seg�n su capacidad de hacerlo.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
Algunos esquemas de representaci�n necesitan informaci�n adicional para identificar su implementaci�n, y hay que decirles d�nde encontrar esa informaci�n. Los autores pueden dar la informaci�n de la ruta de acceso a la implementaci�n del objeto a trav�s del atributo codebase.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://bla.bla.com/java/miimplementacion/"
</OBJECT>
El siguiente ejemplo especifica (con el atributo classid) un objeto ActiveX a trav�s de un URI que comienza con el esquema de nombres "clsid". El atributo data localiza los datos a representar (otro reloj).
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/reloj.stm">
Esta aplicaci�n no est� soportada.
</OBJECT>
Para declarar un objeto de modo que no sea ejecutado cuando lo lea el agente de usuario, se establece el atributo booleano declare del elemento OBJECT. Al mismo tiempo, los autores deben identificar la declaraci�n estableciendo el atributo id del elemento OBJECT en un valor �nico. Las creaciones posteriores del objeto se referir�n a este identificador.
Un OBJECT declarado debe aparecer en un documento antes de la primera creaci�n de ese OBJECT.
Se crea un objeto definido con el atributo declare cada vez que un elemento que se refiera a ese objeto necesite que sea representado (p.ej., se activa un v�nculo que se refiere a �l, se activa un objeto que se refiere a �l, etc.).
En el siguiente ejemplo, declaramos un OBJECT y hacemos que se cree haciendo referencia a �l desde un v�nculo. As�, el objeto puede activarse haciendo clic en un texto resaltado, por ejemplo.
<P><OBJECT declare
id="tierra.declaracion"
data="LaTierra.mpeg"
type="application/mpeg">
<STRONG>La Tierra</STRONG> vista desde el espacio.
</OBJECT>
...m�s abajo en el documento...
<P>�Una preciosa <A href="#tierra.declaracion"> animaci�n de la Tierra!</A>
Otra manera de crear un objeto declarado de esta forma es:
<OBJECT data="#tierra.declaracion"></OBJECT>
El siguiente ejemplo ilustra c�mo especificar valores de ejecuci�n que son otros objetos. En este ejemplo, enviamos texto (concretamente un poema) a un hipot�tico mecanismo para ver poemas. El objeto reconoce un par�metro llamado "fuente" (por ejemplo para representar el poema con una cierta fuente). El valor de este par�metro es a su vez un objeto que inserta (pero que no representa) el objeto fuente. La relaci�n entre el objeto fuente y el objeto visor de poemas se consigue (1) asignando el id "tribuna" a la declaraci�n del objeto y (2) refiri�ndose a �l desde el elemento PARAM del objeto visor de poemas (con valuetype y value).
<P><OBJECT declare
id="tribuna"
type="application/x-webfont"
data="tribuna.gif">
</OBJECT>
...ver el problema de KublaKhan.txt aqu�...
<P><OBJECT classid="http://bla.bla.com/visordepoemas"
data="KublaKhan.txt">
<PARAM name="fuente" valuetype="object" value="#tribuna">
<P>Te est�s perdiendo un visor de poemas realmente estupendo ...
</OBJECT>
Los agentes de usuario que no soporten el atributo declare deben representar los contenidos de la declaraci�n OBJECT.
Ver el DTD Transicional para la definici�n formal.
Definiciones de atributos
Cuando el applet es "deserializado", se invoca el m�todo start(), pero no el m�todo init(). Los atributos que eran v�lidos cuando el objeto original fue serializado no son restaurados. Cualquier atributo que se pase a esta instancia APPLET estar� a disposici�n del applet. Los autores deber�an usar esta caracter�stica con extrema cautela. Un applet deber�a ser detenido antes de ser serializado.
Deben estar presentes o bien code o bien object. Si se dan tanto code como object y proporcionan nombres de clases diferentes, se produce un error.
Atributos definidos en otros lugares
Este elemento, admitido por todos los browsers con soporte Java, permite a los dise�adores incluir un applet Java en un documento HTML. Ha sido desaprobado en favor del elemento OBJECT.
El contenido de APPLET act�a como informaci�n alternativa para agentes de usuario que no soporten este elemento o que est�n configurados para no soportar applets. En cualquier otro caso los agentes de usuario deben ignorar el contenido.
EJEMPLO DESAPROBADO:
En el siguiente ejemplo, el elemento APPLET incluye un applet Java en el documento.
Al no haberse suministrado un codebase, se supone que el applet
est� en el mismo directorio que el documento actual.
<APPLET code="Burbujas.class" width="500" height="500"> Applet Java que dibuja burbujas animadas. </APPLET>
Este ejemplo puede reformularse con OBJECT de esta forma:
<P><OBJECT codetype="application/java"
classid="java:Burbujas.class"
width="500" height="500">
Applet Java que dibuja burbujas animadas.
</OBJECT>
Se pueden proporcionar valores iniciales al applet por medio del elemento PARAM.
EJEMPLO DESAPROBADO:
El siguiente ejemplo de applet Java:
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hola.au|Bienvenido.au"> Applet Java que reproduce un sonido de bienvenida. </APPLET>
puede reformularse de la siguiente manera con OBJECT:
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Hola.au|Bienvenido.au">
Applet Java que reproduce un sonido de bienvenida.
</OBJECT>
Un documento incluido es completamente independiente del documento en el cual se incluye. Por ejemplo, los URIs relativos del documento incluido se completan de acuerdo con el URI base del documento incluido, no con el del documento principal. Un documento incluido s�lo se representa dentro de otro documento (p.ej., en una subventana); por lo dem�s sigue siendo independiente.
Por ejemplo, la l�nea siguiente incluye los contenidos de incluye_me.html en el lugar en que aparece la definici�n OBJECT.
...texto antes... <OBJECT data="incluye_me.html"> Atenci�n: no se pudo incluir incluye_me.html. </OBJECT> ...texto despu�s...
Recu�rdese que los contenidos de OBJECT s�lo deben ser representados si no se puede cargar el fichero especificado por el atributo data.
El comportamiento de un agente de usuario en los casos en que un fichero se incluye a s� mismo queda sin definir.
Los mapas de im�genes permiten a los autores especificar regiones en una imagen u objeto y asignar una acci�n espec�fica a cada regi�n (p.ej., abrir un documento, ejecutar un programa, etc.). Cuando la regi�n es activada por el usuario, se ejecuta la acci�n.
Un mapa de im�genes se crea asociando un objeto con una especificaci�n de las �reas geom�tricas sensibles del objeto.
Hay dos tipos de mapas de im�genes:
Se prefieren los mapas de im�genes en el cliente que los mapas de im�genes en el servidor por dos razones: son accesibles a las personas que utilizan agentes de usuario no gr�ficos y permiten saber en todo momento si el apuntador est� sobre una regi�n activa o no.
<!ELEMENT MAP - - ((%block;) | AREA)+ -- mapa de im�genes en el lado del cliente --> <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events -- name CDATA #REQUIRED -- como referencia para usemap -- >
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
<!ELEMENT AREA - O EMPTY -- �rea de un mapa de im�genes en el cliente--> <!ATTLIST AREA %attrs; -- %coreattrs, %i18n, %events -- shape %Shape; rect -- controla la interpretaci�n de las coords -- coords %Coords; #IMPLIED -- lista de longitudes separadas por comas -- href %URI; #IMPLIED -- URI del recurso vinculado -- nohref (nohref) #IMPLIED -- esta regi�n no tiene acci�n -- alt %Text; #REQUIRED -- descripci�n corta -- tabindex NUMBER #IMPLIED -- posici�n en el orden de tabulaci�n -- accesskey %Character; #IMPLIED -- car�cter de la tecla de accesibilidad -- onfocus %Script; #IMPLIED -- el foco se dirigi� hacia el elemento -- onblur %Script; #IMPLIED -- el elemento perdi� el foco -- >
Etiqueta inicial: obligatoria, Etiqueta final: prohibida
Definiciones de atributos de MAP
Definiciones de atributos de AREA
Las coordenadas son relativas a la esquina superior izquierda del objeto. Todos los valores son longitudes. Todos los valores van separados por comas.
N.T.: La especificaci�n no aclara si las coordenadas x,y se miden respecto al cero o al uno, es decir, si las coordenadas de la esquina superior izquierda son (0,0) o (1,1).
Atributo para asociar un mapa de im�genes con un elemento
Atributos definidos en otros lugares
El elemento MAP especifica un mapa de im�genes en el lado del cliente (u otro mecanismo de navegaci�n) que puede ser asociado con otros elementos (IMG, OBJECT, o INPUT). Un mapa de im�genes se asocia a un elemento a trav�s del atributo usemap del elemento. El elemento MAP puede ser utilizado sin una imagen asociada por mecanismos generales de navegaci�n.
La presencia del atributo usemap en un elemento OBJECT implica que el objeto que incluye es una imagen. Adem�s, cuando el elemento OBJECT tenga asociado un mapa de im�genes en el lado del cliente, los agentes de usuario pueden permitir la interacci�n del usuario con el elemento OBJECT s�lo en lo que se refiere al mapa de im�genes en el lado del cliente. Esto permite a los agentes de usuario (tales como un navegador de audio o un robot) interactuar con el OBJECT sin tener que procesarlo; el agente de usuario puede incluso optar por no obtener (o procesar) el objeto. Cuando un OBJECT tenga asociado un mapa de im�genes, los autores no deber�an esperar que el objeto sea obtenido o procesado por todos los agentes de usuario.
El modelo de contenido del elemento MAP permite a los autores lo siguiente:
Cuando un elemento MAP contenga contenido mixto (tanto elementos AREA como contenido en bloque), los agentes de usuario deber�an ignorar los elementos AREA.
Los autores deber�an especificar la geometr�a de un mapa de im�genes completamente con elementos AREA, o completamente con elementos A, o completamente con ambos si el contenido es mixto. Los autores pueden querer usar contenido mixto para que los agentes de usuario antiguos utilicen la geometr�a del mapa especificada por los elementos AREA y que los agentes de usuario modernos saquen partido de la riqueza del contenido en bloque.
Si dos o m�s regiones se superponen, tiene prioridad la regi�n definida por el elemento que aparece antes en el documento.
Los agentes de usuario y los autores deber�an ofrecer alternativas textuales a los mapas de im�genes gr�ficos para los casos en que los gr�ficos no est�n disponibles o en que el usuario no pueda acceder a ellos. Por ejemplo, los agentes de usuario pueden usar el texto alt para crear v�nculos textuales en lugar de un mapa de im�genes gr�fico. Estos v�nculos pueden ser activados de diferentes maneras (con el teclado, activaci�n por voz, etc.).
Nota. MAP no es compatible con los agentes de usuario HTML 2.0.
En el ejemplo siguiente, creamos un mapa de im�genes en el lado del cliente para el elemento OBJECT. No queremos representar los contenidos del mapa de im�genes cuando se represente el OBJECT, as� que "ocultamos" el elemento MAP dentro del contenido del elemento OBJECT. En consecuencia, los contenidos del elemento MAP s�lo ser�n representados si el OBJECT no puede ser representado.
<HTML>
<HEAD>
<TITLE>�El sitio ch�vere!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="barranav1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navegar por este sitio:
<A href="guia.html" shape="rect" coords="0,0,118,28">Acceder a la Gu�a</a> |
<A href="atajo.html" shape="rect" coords="118,0,184,28">Ir</A> |
<A href="buscar.html" shape="circle" coords="184,200,60">Buscar</A> |
<A href="top10.html" shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
</MAP>
</OBJECT>
</BODY>
</HTML>
Podemos querer representar los contenidos del mapa de im�genes incluso si el agente de usuario puede representar el OBJECT. Por ejemplo, podemos querer asociar un mapa de im�genes con un elemento OBJECT e incluir una barra de navegaci�n textual en la parte inferior de la p�gina. Para ello, definimos el elemento MAP fuera del OBJECT:
<HTML>
<HEAD>
<TITLE>�El sitio ch�vere!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="barranav1.gif" type="image/gif" usemap="#map1">
</OBJECT>
...aqu� el resto de la p�gina...
<MAP name="map1">
<P>Navegar por este sitio:
<A href="guia.html" shape="rect" coords="0,0,118,28">Acceder a la Gu�a</a> |
<A href="atajo.html" shape="rect" coords="118,0,184,28">Ir</A> |
<A href="busca.html" shape="circle" coords="184,200,60">Buscar</A> |
<A href="top10.html" shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
</MAP>
</BODY>
</HTML>
En el siguiente ejemplo, creamos un mapa de im�genes similar, esta vez utilizando el elemento AREA. Obs�rvese el uso del texto alt:
<P><OBJECT data="barranav1.gif" type="image/gif" usemap="#map1">
<P>Esto es una barra de navegaci�n.
</OBJECT>
<MAP name="map1">
<AREA href="guia.html"
alt="Acceder a la Gu�a"
shape="rect"
coords="0,0,118,28">
<AREA href="buscar.html"
alt="Buscar"
shape="rect"
coords="184,0,276,28">
<AREA href="atajo.html"
alt="Ir"
shape="circle"
coords="184,200,60">
<AREA href="top10.html"
alt="Top Ten"
shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
</MAP>
Aqu� tenemos una versi�n similar usando el elemento IMG en lugar de OBJECT (con la misma declaraci�n MAP):
<P><IMG src="barranav1.gif" usemap="#map1" alt="barra de navegaci�n">
El siguiente ejemplo ilustra c�mo pueden compartirse los mapas de im�genes.
Los elementos OBJECT anidados son �tiles para proporcionar "redes de seguridad" en caso de que un agente de usuario no soporte ciertos formatos. Por ejemplo:
<P>
<OBJECT data="barranav.png" type="image/png">
<OBJECT data="barranav.gif" type="image/gif">
texto que describe la imagen...
</OBJECT>
</OBJECT>
Si el agente de usuario no soporta el formato PNG, intenta representar la imagen GIF. Si no soporta GIF (es decir, es un agente de usuario por voz), utiliza la descripci�n textual proporcionada como contenido del elemento OBJECT interior. Cuando los elementos OBJECT se anidan de esta manera, los autores pueden compartir mapas de im�genes entre ellos:
<P>
<OBJECT data="barranav.png" type="image/png" usemap="#map1">
<OBJECT data="barranav.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navegar por este sitio:
<A href="guia.html" shape="rect" coords="0,0,118,28">Acceder a la Gu�a</a> |
<A href="atajo.html" shape="rect" coords="118,0,184,28">Ir</A> |
<A href="buscar.html" shape="circle" coords="184,200,60">Buscar</A> |
<A href="top10.html" shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
</MAP>
</OBJECT>
</OBJECT>
El siguiente ejemplo ilustra c�mo pueden especificarse elementos A para crear zonas inactivas dentro de un mapa de im�genes. El primer v�nculo especifica una peque�a regi�n circular sin v�nculo asociado. El segundo v�nculo especifica una regi�n circular m�s grande con el mismo centro. La combinaci�n de ambos define un anillo cuyo centro es inactivo y cuya corona es activa. El orden de las definiciones de los v�nculos es importante, ya que el c�rculo menor debe prevalecer sobre el c�rculo mayor.
<MAP name="map1"> <P> <A shape="circle" coords="100,200,50">Yo soy inactivo.</A> <A href="vinculo-circulo-externo.html" shape="circle" coords="100,200,250">Yo soy activo.</A> </MAP>
An�logamente, el atributo nohref del elemento AREA declara que una regi�n geom�trica no tiene un v�nculo asociado.
Los mapas de im�genes en el lado del servidor puede ser interesantes en aquellos casos en que el mapa de im�genes sea demasiado complicado para un mapa de im�genes en el lado del cliente.
S�lo es posible definir un mapa de im�genes el lado del servidor para los elementos IMG e INPUT. En el caso de IMG, el IMG debe estar dentro de un elemento A y debe establecerse el atributo booleano ismap ([CI]). En el caso de INPUT, el INPUT debe ser del tipo "image".
Cuando el usuario activa el v�nculo haciendo clic sobre la imagen, las coordenadas de pantalla se env�an directamente al servidor donde se aloja el documento. Las coordenadas de pantalla se expresan como p�xeles de pantalla relativos a la imagen. Para informaci�n normativa sobre la definici�n de un p�xel y c�mo escalarlo, consulte [CSS1].
En el siguiente ejemplo, la regi�n activa define un v�nculo en el lado del servidor. As�, un clic en cualquier parte de la imagen har� que las coordenadas del clic sean enviadas al servidor.
<P><A href="http://www.acme.com/cgi-bin/competicion">
<IMG src="juego.gif" ismap alt="diana"></A>
El lugar del clic se pasa al servidor como sigue. El agente de usuario crea un nuevo URI a partir del URI especificado por el atributo href del elemento A, a�adiendo un '?' seguido de las coordenadas x e y, separadas por una coma. A continuaci�n se sigue el v�nculo especificado por el nuevo URI. Por ejemplo, en el ejemplo dado, si el usuario hace clic en x=10, y=27, entonces el URI creado es "http://www.acme.com/cgi-bin/competicion?10,27".
Los agentes de usuario que no ofrezcan al usuario medios para especificar unas coordenadas espec�ficas (p.ej., agentes de usuario no gr�ficos que reciban la entrada por teclado, agentes de usuario por voz, etc.) deber�an enviar las coordenadas "0,0" al servidor cuando se activa el link.
Definiciones de atributos
Si se especifican, los atributos width y height dicen a los agentes de usuario que invaliden el tama�o original de la imagen u objeto en favor de estos valores.
Cuando el objeto es una imagen, se escala. Los agentes de usuario deber�an hacer lo posible para escalar el objeto o imagen de modo que se respeten la anchura y altura especificadas por el autor. Obs�rvese que las longitudes expresadas como porcentajes se basan el espacio horizontal o vertical disponible actualmente, no en el tama�o original de la imagen, objeto o aplicaci�n.
Los atributos height y width dan a los agentes de usuario una idea del tama�o de una imagen u objeto para que puedan reservar espacio para ellos y continuar la representaci�n del documento mientras esperan a los datos de la imagen.
Definiciones de atributos
Una imagen u objeto puede estar rodeada de un borde (p.ej., cuando se especifica un borde por el usuario o cuando la imagen es el contenido de un elemento A).
Definiciones de atributos
Definiciones de atributos
Los siguientes valores de align se refieren a la posici�n del objeto con respecto al texto que le rodea:
Hay otros dos valores, left y right, que hacen que la imagen "flote" hacia el margen izquierdo o derecho actual. Se habla sobre ellos en la secci�n sobre objetos flotantes.
Diferentes interpretaciones de align. Los agentes de usuario pueden interpretar de manera diferente el atributo align. Algunos s�lo tienen en cuenta lo que haya ocurrido en la l�nea antes del elemento, algunos tienen en cuenta el texto que hay a ambos lados del elemento.
Definiciones de atributos
Varios elementos no textuales (IMG, AREA, APPLET e INPUT) permiten a los autores especificar texto alternativo que sirva como contenido cuando el elemento no pueda ser representado normalmente. El especificar texto alternativo ayuda a los usuarios que no tengan terminales gr�ficas, a los usuarios cuyos navegadores no soporten formularios, a los usuarios con discapacidades visuales, a aquellos que utilicen sintetizadores de voz, a aquellos que hayan configurado sus agentes de usuario para no mostrar im�genes, etc.
El atributo alt debe especificarse para los elementos IMG y AREA. Es opcional para los elementos INPUT y APPLET.
Si bien el texto alternativo puede ser muy �til, hay que tratarlo con cuidado. Los autores deber�an seguir las siguientes pautas:
Los implementadores deber�an consultar la secci�n sobre accessibilidad para informaci�n sobre c�mo tratar los casos en que se omite el texto alternativo.